<template>
  <div class="">
    <div class="banner">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in banner" :key="image">
          <img :src="image.pic" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="column">
      <p>{{ obj.name }}</p>
      <p>{{ obj.characteristic }}</p>
      <p>低价{{ obj.minPric }}</p>
    </div>
    <div class="tap">
      <div @click="flag = 1" :class="{ active: flag == 1 }">商品介绍</div>
      <div @click="flag = 2" :class="{ active: flag == 2 }">商品评价</div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { getDetails } from "@/api/details/index.js";
import { useRoute } from "vue-router";
export default {
  setup(props, { emit }) {
    let route = useRoute();
    let banner = ref([]);
    let obj = ref([]);
    let flag = ref(1);
    console.log(route.query.id);
    getDetails(route.query.id).then((res) => {
      console.log(res);
      banner.value = res.data.pics;
      obj.value = res.data.basicInfo;
      console.log(banner);
    });
    return { banner, obj, flag };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.banner {
  img {
    width: 100%;
    height: 750px;
  }
}
.tap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  div {
    height: 80px;
    flex: 1;
    align-items: center;
    text-align: center;
    line-height: 80px;
    font-size: 30px;
  }
}
.active{
    border-bottom: 4px solid rgb(212, 21, 21);
}
.column {
  width: 100%;
  height: 200px;
}
</style>
